import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { Slider, Card } from 'iftide';

export default class User1 extends Component { 
    
    itemClick(id) {
        // alert(id);
    }

    snapToItem(index){
        // alert(index);
    }

    render() {

      let card = (
        <Card
            full={true}
            onPress={this.itemClick}
            headerTitle={<Text>自定义标题</Text>}
            headerTitleExtra={<Text>标题辅助</Text>}
            content={<View style={{ height: 100 }}><Text>这里可以放图片，文字，按钮</Text></View>}
            footer={<Text>底部内容</Text>}
            footerExtra={<Text>底部内容辅助</Text>}
        />
      );

      let data1 = [
          { item: card , id: 1 },
          { item: card , id: 2 },
          { item: card , id: 3 },
          { item: card , id: 4 }
      ];

      let item1 = (<View style={styles.item}><Text style={styles.itemText}>自定义构件1</Text></View>);
      let item2 = (<View style={styles.item}><Text style={styles.itemText}>自定义构件2</Text></View>);
      let item3 = (<View style={styles.item}><Text style={styles.itemText}>自定义构件3</Text></View>);
      let item4 = (<View style={styles.item}><Text style={styles.itemText}>自定义构件4</Text></View>);
      let item5 = (<View style={styles.item}><Text style={styles.itemText}>自定义构件5</Text></View>);
      
      let data2 = [
        { item: item1 , id: 1 },
        { item: item2 , id: 2 },
        { item: item3 , id: 3 },
        { item: item4 , id: 4 },
        { item: item5 , id: 5 }
      ];
      return (
          <View > 
            
            <Text>实例1-自定义构件轮播1</Text>
            <Slider
                data={data1}
                itemHeight={200}
                pagination={true}
                loop={false}
                autoPlay={false}
                // showCount={true}
            />
			      <Text>实例2-自定义构件轮播2</Text>
            <Slider
                data={data2}
                itemWidth={300}
                itemRealWidth={260}
                itemHeight={200}
                pagination={false}
                loop={true}
                snapToItem={(index)=>this.snapToItem(index)}
                firstItem={2}
                autoPlay={false}
                showCount={true}
                clickFunc={this.itemClick}
            />
          </View>
      );
  }
}

const styles = StyleSheet.create({
  item: {
    borderColor: '#D8D8D8',
    height: 200,
    width: 260,
    backgroundColor: '#FFF',
    borderRadius: 9,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
  }
})

   